{extend name="main"}
{block name="style"}
<style type="text/css">
.min-300px{min-width: 300px;}
</style>
{/block}
{block name="body"}
<div class="bg-white">
	<div class="flex">
		<div class="border-right p-3 min-300px">
			<el-menu>
		      <el-menu-item v-for="(v,index) in app_list" :index="v.app_id" @click="getAppApi(v,index);">
		        <i :class="v.app_icon"></i>
		        <span slot="title">{{v.app_name}}</span>
		      </el-menu-item>
		    </el-menu>
		</div>
		<div class="flex-1 p-3" v-if="find.app_id">
			<table class="table table-borderless">
				<tr>
					<td width="120" class="text-right text-secondary small">状态</td>
					<td> 
						<el-switch 
						v-model="find.app_status"
						active-color="#13ce66"
						inactive-color="#ff4949"
						:active-value="1"
						:inactive-value="0"
						@change="setAppStatus">
						</el-switch>
					</td>
				</tr>
				<tr>
					<td width="120" class="text-right text-secondary small">应用ID</td>
					<td>{{find.app_id}}</td>
				</tr>
				<tr>
					<td width="120" class="text-right text-secondary small">域名</td>
					<td>
						<el-link 
						:href="'http://'+find.app_domain+'.{:config('web.domain')}'"
						:underline="false"
						target="_blank">https://{{find.app_domain}}.{:config('web.domain')}</el-link>
					</td>
				</tr>
				<tr>
					<td width="120" class="text-right text-secondary small">应用模块</td>
					<td>{{find.app_modul}}</td>
				</tr>
				<tr>
					<td width="120" class="text-right text-secondary small">KEY</td>
					<td>
						<el-link :underline="false" type="info" @click="dialogVisible=true;">查看</el-link>
					</td>
				</tr>
				<tr>
					<td width="120" class="text-right text-secondary small">KEY Secret</td>
					<td>
						<el-link :underline="false" type="info" @click="dialogVisible=true;">查看</el-link>
					</td>
				</tr>
				<tr v-if="find.app_status_msg">
					<td width="120" class="text-right text-secondary small">禁用消息</td>
					<td>{{find.app_status_msg}}</td>
				</tr>
				<tr>
					<td width="120" class="text-right text-secondary"></td>
					<td>
						<el-button type="success" size="mini"
						@click="window.open('/client/addApi/'+find.app_id)">添加API</el-button>
						<el-button type="primary" size="mini" 
						@click="window.open('/client/editApp/'+find.app_id)">编辑应用</el-button>
						<el-button type="warning" size="mini"
						@click="updateApiCacheAjax">更新缓存</el-button>
						<el-button type="danger" size="mini"
						@click="updateAppKeyAjax">更新KEY</el-button>
					</td>
				</tr>
			</table>
			<div class="table-responsive">
				<el-table
			      	:data="tableData"
		    		stripe
		    		v-loading="search.ajax"
		    		style="width: 100%;">
			      <el-table-column
			        prop="api_id"
			        label="接口ID"
			        width="80">
			      </el-table-column>
			      <el-table-column
			        label="接口名称"
			       	min-width="200">
				      <template slot-scope="scope">
						<el-link 
						:href="'/client/editApi/'+scope.row.api_id"
						:underline="false"
						target="_blank">{{scope.row.api_name}}</el-link>
				      </template>
			      </el-table-column>
			      <el-table-column
			        prop="api_url"
			        label="Url"
			        min-width="240">
			      </el-table-column>
			      <el-table-column
			        label="模块/控制器/操作"
			        min-width="240">
				      <template slot-scope="scope">
				      	{{find.app_modul}}/{{scope.row.api_controller}}/{{scope.row.api_action}}
				      </template>
			      </el-table-column>
			      <el-table-column
			        prop="api_param"
			        label="参数"
			        min-width="120">
			      </el-table-column>
			      <el-table-column
			        prop="api_method"
			        label="请求方式"
			        width="100">
			      </el-table-column>
			      <el-table-column
			        label="状态"
			        width="80">
				      <template slot-scope="scope">
				      	<transition>
				      		<el-button type="success" size="minism"
				      		v-if="scope.row.api_status==1 || scope.row.api_status==2" 
				      		@click="setApiStatus(scope.row);" 
				      		:loading="scope.row.api_status==2">正常</el-button>
				      		<el-button type="info" size="minism" 
				      		v-else="scope.row.api_status==0 || scope.row.api_status==2" 
				      		@click="setApiStatus(scope.row);" 
				      		:loading="scope.row.api_status==2">禁用</el-button>
						</transition>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="跨域"
			        width="80">
				      <template slot-scope="scope">
				      	<transition>
				      		<el-button type="success" size="minism"
				      		v-if="scope.row.api_allow==1 || scope.row.api_allow==2" 
				      		@click="setApiAllow(scope.row);" 
				      		:loading="scope.row.api_allow==2">允许</el-button>
				      		<el-button type="info" size="minism" 
				      		v-else="scope.row.api_allow==0 || scope.row.api_allow==2" 
				      		@click="setApiAllow(scope.row);" 
				      		:loading="scope.row.api_allow==2">禁止</el-button>
						</transition>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="登录"
			        width="80">
				      <template slot-scope="scope">
				      	<transition>
				      		<el-button type="success" size="minism"
				      		v-if="scope.row.api_is_login==1 || scope.row.api_is_login==2" 
				      		@click="setApiIsLogin(scope.row);" 
				      		:loading="scope.row.api_is_login==2">需要</el-button>
				      		<el-button type="info" size="minism" 
				      		v-else="scope.row.api_is_login==0 || scope.row.api_is_login==2" 
				      		@click="setApiIsLogin(scope.row);" 
				      		:loading="scope.row.api_is_login==2">不需要</el-button>
						</transition>
				      </template>
			      </el-table-column>
			      <el-table-column
			        prop="api_ext"
			        label="后缀"
			        width="120">
			      </el-table-column>
			      <el-table-column
			        prop="api_status_msg"
			        label="禁用消息"
			        width="120">
			      </el-table-column>
			      <el-table-column
			        label="时间线"
			        width="180">
				      <template slot-scope="scope">
				        <el-popover trigger="hover" placement="top">
				          <p>创建时间: {{ scope.row.create_time }}</p>
				          <p>更新时间: {{ scope.row.update_time }}</p>
				          <div slot="reference" class="name-wrapper">
				            <el-tag size="small" type="info">{{ scope.row.create_time }}</el-tag>
				          </div>
				        </el-popover>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="/"
			        width="80">
				      <template slot-scope="scope">
				        <el-button
				            type="primary"
				            size="minism"
				            @click="window.open('/client/editApi/'+scope.row.api_id)">
				            编辑
				        </el-button>
				      </template>
			      </el-table-column>
			    </el-table>
			</div>
			<div class="table-responsive py-3">
				<el-pagination
				  background
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="search.page"
			      :page-sizes="[50,100,200]"
			      :page-size="search.pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="search.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</div>
<el-dialog
  title="应用密钥"
  :visible.sync="dialogVisible"
  width="50%">
  <el-form label-width="120px" label-position="top">
    <el-form-item label="公钥(加密使用)">
      <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="find.app_key" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="私钥(解密使用)">
      <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="find.app_key_secret" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false" size="small">关 闭</el-button>
  </span>
</el-dialog>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="app_list"}
	var app_list=[];
	{else/}
	var app_list={:json_encode($app_list,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			dialogVisible:false,
			find:{
				index:null,
				app_id:0,
				app_name:'',
				app_icon:'',
				app_domain:'',
				app_modul:'',
				app_key:'',
				app_key_secret:'',
				app_status:0,
				app_status_msg:'',
				update_time:'',
				create_time:'',
			},
			search:{
				app_id:0,
				ajax:false,
				page:1,
				total:0,
				pageSize:50
			},
			app_list:app_list,
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			getAppApi(val,index){
				this.find=val;
				this.find.index=index;
				this.search.app_id=val.app_id;
				this.search.page=1;
				this.initHtml();
			},
			updateAppKeyAjax(){
				var _this=this;
        		const h = this.$createElement;
		        this.$confirm(h('div', null, [
		            h('h6', null, '即将更新应用KEY与KEY Secret '),
		            h('p', { class: 'text-danger' }, '更新后所有登录信息将会失效'),
		            h('p', { class: 'text-danger' }, '此操作不可逆转, 是否继续?')
		          ]), '提示', {
		          title:'警告',
		          confirmButtonText: '继续',
		          cancelButtonText: '取消',
		          type: 'error'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/client/updateAppKeyAjax/'+this.find.app_id,function(ret) {
		    			loading.close();
		    			if(ret){
		    				if(ret.code === 0){
		    					var index=_this.find.index;
		    					_this.app_list[index]=ret.data;
		    					_this.find=ret.data;
		    					_this.find.index=index;
		    					XYBase.success(ret.msg);
		    				}else{
		    					XYBase.msg(ret.msg);
		    				}
		    			}else{
							XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
			},
			updateApiCacheAjax(){
		        this.$confirm('即将更新接口缓存, 是否继续?', '提示', {
		          confirmButtonText: '继续',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/client/updateApiCacheAjax/'+this.find.app_id,function(ret) {
		    			loading.close();
		    			if(ret){
		    				if(ret.code === 0){
		    					XYBase.success(ret.msg);
		    				}else{
		    					XYBase.msg(ret.msg);
		    				}
		    			}else{
							XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
			},
			setAppStatus(){
				var _this=this;
	    		if (_this.find.app_status==2) return;
	    		var app_status=_this.find.app_status,oldStatus=1;
	    		if (_this.find.app_status){
	    			oldStatus=0;
	    		}
	    		_this.find.app_status=2;
	    		if (app_status) {
		    		$.getJSON('/client/setAppStatus/'+_this.find.app_id+'/'+app_status,function(ret){
		    			_this.find.app_status=oldStatus;
		    			if (ret) {
		    				if (ret.code === 0) {
		    					_this.find.app_status=app_status;
		    				}else{
		    					XYBase.msg(ret.msg);
		    				}
		    			}else{
							XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
	    		}else{
			        this.$prompt('请输入禁用原因', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          inputPattern: /[\u4e00-\u9fa5]{1,200}|\w{1,200}/,
			          inputErrorMessage: '禁用原因长度为:1~200'
			        }).then(({ value }) => {
			    		$.getJSON('/client/setAppStatus/'+_this.find.app_id+'/'+app_status+'/'+value,function(ret){
			    			_this.find.app_status=oldStatus;
			    			if (ret) {
			    				if (ret.code === 0) {
			    					_this.find.app_status=app_status;
			    				}else{
			    					XYBase.msg(ret.msg);
			    				}
			    			}else{
								XYBase.error(XYBase.config.system_network_error);
			    			}
			    		});
			        }).catch(() => {
		    			_this.find.app_status=oldStatus;
    					XYBase.msg('已取消');
			        });
	    		}
			},
			setApiStatus(data){
	    		if (data.api_status==2) return;
	    		var api_status=1,oldStatus=data.api_status;
	    		if (data.api_status) api_status=0;
	    		data.api_status=2;
	    		if (api_status) {
		    		$.getJSON('/client/setApiStatus/'+data.api_id+'/'+api_status,function(ret){
		    			data.api_status=oldStatus;
		    			if (ret) {
		    				if (ret.code === 0) {
		    					data.api_status=api_status;
		    				}else{
		    					XYBase.msg(ret.msg);
		    				}
		    			}else{
							XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
	    		}else{
			        this.$prompt('请输入禁用原因', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          inputPattern: /[\u4e00-\u9fa5]{1,200}|\w{1,200}/,
			          inputErrorMessage: '禁用原因长度为:1~200'
			        }).then(({ value }) => {
			    		$.getJSON('/client/setApiStatus/'+data.api_id+'/'+api_status+'/'+value,function(ret){
			    			data.api_status=oldStatus;
			    			if (ret) {
			    				if (ret.code === 0) {
			    					data.api_status=api_status;
			    				}else{
			    					XYBase.msg(ret.msg);
			    				}
			    			}else{
								XYBase.error(XYBase.config.system_network_error);
			    			}
			    		});
			        }).catch(() => {
		    			data.api_status=oldStatus;
    					XYBase.msg('已取消');
			        });
	    		}
			},
			setApiAllow(data){
	    		if (data.api_allow==2) return;
	    		var api_allow=1,oldStatus=data.api_allow;
	    		if (data.api_allow) api_allow=0;
	    		data.api_allow=2;
	    		$.getJSON('/client/setApiAllow/'+data.api_id+'/'+api_allow,function(ret){
	    			data.api_allow=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.api_allow=api_allow;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
			},
			setApiIsLogin(data){
	    		if (data.api_is_login==2) return;
	    		var api_is_login=1,oldStatus=data.api_is_login;
	    		if (data.api_is_login) api_is_login=0;
	    		data.api_is_login=2;
	    		$.getJSON('/client/setApiIsLogin/'+data.api_id+'/'+api_is_login,function(ret){
	    			data.api_is_login=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.api_is_login=api_is_login;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		if (_this.search.ajax)return;
	      		_this.search.ajax=true;
	      		_this.tableData=[];
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
		}
	});
</script>
{/block}